<template>
  <div>
    <div class="bbg1">
      <div class="title2">
        <div class="shuxian2"></div>
        <div class="wenzi2">网格人员管理</div>
      </div>
    </div>

    <el-container class="bbg1 pl45">
      <el-aside
        style="width: 225px; height: 881px; background: rgba(7, 65, 78, 1)"
      >
        <el-tree
          :data="treedata"
          :expand-on-click-node="false"
          class="tree"
          node-key="id"
          :props="props1"
          v-if="showTree"
          :indent="20"
          :default-expanded-keys="defaultExpandedKeys"
          style="background: rgba(7, 65, 78, 1)"
          @node-click="showUser"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span></span>
          </span>
        </el-tree>
      </el-aside>

      <el-main style="padding: 0px">
        <div class="t1">
          {{ title }}
        </div>
        <div class="t2">
          <el-tabs v-model="activeName2" type="card" v-if="show" class="mt10">
            <el-tab-pane label="网格信息" name="first">
              <gride :obj="currentGride"></gride>
            </el-tab-pane>
            <el-tab-pane label="人员信息" name="second">
              <user :obj="currentGride"></user>
            </el-tab-pane>
            <!--
					<el-tab-pane label="企业信息" name="third">
						<unloading :obj="currentGride" :gridarr="treedata"></unloading>
					</el-tab-pane>
					<el-tab-pane label="执行部门信息" name="fourth">
						<member :obj="currentGride"></member>
					</el-tab-pane>
					-->
          </el-tabs>
        </div>
      </el-main>
    </el-container>

    <!-- <el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>网格人员管理1111</span>
	</div>
<el-container :style="{width : offsetwidth + 'px', height : offsetheight + 'px'}">
	<el-aside width="300px">
		<div class="custom-tree-node">
			<span>一级：{{top.name}}</span>
			<span>
				<el-button
			        type="text"
			        size="mini"
			        @click="showUser(top)">
			        查看用户
			    </el-button>
	        </span>
		</div>
		<el-tree :data="treedata" 
		:expand-on-click-node="false"
		:default-expand-all="true"
		class="tree"
		node-key="id"
		:props="props1"
		v-if="showTree"
		:indent="20"
		:style="{height : offsetheight + 'px'}"
		@node-click="showUser"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
		        <span>{{ node.label }}</span>
		        <span>
		        	
		        </span>
	        </span>

		</el-tree>
	</el-aside>
	<el-main style="padding-top:0px;">

		{{title}}

		<el-tabs v-model="activeName2" type="card" v-if="show" class="mt10" >
			<el-tab-pane label="网格信息" name="first">
				<gride :obj="currentGride"></gride>
			</el-tab-pane>
			<el-tab-pane label="人员信息" name="second">
				<user :obj="currentGride"></user>
			</el-tab-pane>
			<el-tab-pane label="企业信息" name="third">
				<unloading :obj="currentGride" :gridarr="treedata"></unloading>
			</el-tab-pane>
			<el-tab-pane label="执行部门信息" name="fourth">
				<member :obj="currentGride"></member>
			</el-tab-pane>
		</el-tabs>

	</el-main>
</el-container>
</el-card> -->

    <el-dialog
      title="添加用户"
      width="70%"
      :visible.sync="userDialogFormVisible"
    >
      <el-form ref="device" label-width="180px">
        <el-form-item label="账号:">
          <el-input v-model="userForm.login_name"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="userForm.mobile"></el-input>
        </el-form-item>

        <el-form-item label="角色:">
          <el-checkbox
            v-for="(item, index) in roleList"
            v-model="checked5"
            :key="index"
            :label="item.role_id"
            border
            size="medium"
          >
            {{ item.role_name }}
          </el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import gride from "./components/gride_1";
import member from "./components/member_1";
import unloading from "./components/unloading_1";
import user from "./components/user_1";

import position from "@/components/position/index";

export default {
  name: "userList",

  data() {
    return {
      offsetheight: document.documentElement.clientHeight - 60 - 20 - 20, //
      offsetwidth: document.documentElement.clientWidth - 200 - 50,

      treedata: [],
      showTree: false,

      top: {},

      props1: {
        label: "name",
      },

      form: {},

      userList: {},

      pageNo: 1,
      pageSize: 10,

      userDialogFormVisible: false,

      userForm: {},

      reason: "",

      currentGride: {},

      roleList: [],

      checked5: [],

      activeName2: "first",

      subGrideList: {},
      subUserList: {},
      subUnloadingList: {},
      subMemberList: {},

      show: false,

      title: "",

      defaultExpandedKeys: [],
    };
  },

  props: {},

  components: {
    gride,
    member,
    unloading,
    user,
    position,
  },

  computed: {
    ...mapGetters([]),
  },

  methods: {
    init() {
      this.defaultExpandedKeys = [];
      this.$http({
        fun: "grideList",
        cb: (res) => {
          res.forEach((item) => {
            if (item.type == "1") {
              this.defaultExpandedKeys.push(item.id);
            }
          });

          const result = this.$util.transData(
            res,
            "id",
            "parent_id",
            "children"
          );
          console.log(result);
          //this.top = result[0];
          //this.treedata = result[0].children;
          this.treedata = result;
          this.showTree = true;

          this.showUser(this.treedata[0]);
        },
      });

      // this.$http({
      // 	fun : 'roleList',
      // 	cb : res => {
      // 		console.log('rolelist');
      // 		console.log(res);
      // 		this.roleList = res;
      // 	}
      // });
    },

    showUser(item) {
      console.log(item);
      if (item.id == "88888") {
        this.title = "沈阳市民政局";
      } else {
        this.$http({
          fun: "getPidGridName",
          id: item.id,
          cb: (res) => {
            this.title = res;
          },
        });
      }

      this.show = false;
      this.currentGride = item;
      this.$nextTick(() => {
        this.show = true;
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },

    handleCurrentChange(val) {
      this.pageNo = val;
      this.init();
    },

    onSubmit() {},

    addUser() {
      this.userDialogFormVisible = true;
    },

    createUser() {
      this.$http({
        fun: "createUser",
        grid_id: this.currentGride.id,
        login_name: this.userForm.login_name,
        password: this.userForm.password,
        mobile: this.userForm.mobile,
        name: this.userForm.name,
        rolelist: this.checked5.join(","),
        cb: (res) => {
          console.log(res);
          this.showUser(this.currentGride);
        },
      });
    },
  },

  watch: {},

  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.t1 {
  padding: 18px;
  /*width:1530px;*/
  height: 25px;
  border: 1px solid rgba(22, 144, 152, 1);
  margin-left: 20px;
  color: #fff;
}

.t2 {
  /*padding: 18px;*/
  /*width:1565px;*/
  margin: 20px 0 20px 20px;
}
</style>
